import { Tooltip } from "@lobehub/ui"
import { Typography } from "antd"
import { memo } from "react"
import { Center, Flexbox } from "react-layout-kit"

import FileIcon from "@/components/FileIcon"
import { useChatStore } from "@/store/chat"

import { useStyles } from "./style"

const ChunkItem = memo(
    ({ id, fileId, similarity, text, filename, fileType }) => {
        const { styles, cx } = useStyles()
        const openFilePreview = useChatStore(s => s.openFilePreview)

        return (
            <Flexbox
                align={"center"}
                className={cx(styles.container)}
                gap={4}
                horizontal
                key={id}
                onClick={e => {
                    e.stopPropagation()
                    openFilePreview({ chunkId: id, chunkText: text, fileId })
                }}
            >
                <FileIcon
                    fileName={filename}
                    fileType={fileType}
                    size={20}
                    variant={"pure"}
                />
                <Flexbox
                    gap={12}
                    horizontal
                    justify={"space-between"}
                    style={{ maxWidth: 200 }}
                >
                    <Typography.Text ellipsis={{ tooltip: false }}>
                        {filename}
                    </Typography.Text>
                    {/*<Typography.Text*/}
                    {/*  ellipsis={{ suffix: '...' }}*/}
                    {/*  style={{ fontSize: 12, lineHeight: 1 }}*/}
                    {/*  type={'secondary'}*/}
                    {/*>*/}
                    {/*  {text}*/}
                    {/*</Typography.Text>*/}
                    {similarity && (
                        <Tooltip title={similarity} styles={{ root: {} }}>
                            <Center className={styles.badge}>{similarity.toFixed(1)}</Center>
                        </Tooltip>
                    )}
                </Flexbox>
            </Flexbox>
        )
    }
)

export default ChunkItem
